<template>
  <div class="trigger-terms-list">
    <div class="list-header">
      <span>触发项列表</span>
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="$emit('add-term')"
        >添加触发项</el-button
      >
    </div>
    <el-row :gutter="20">
      <el-col
        :span="8"
        v-for="(item, index) in termList"
        :key="index"
        class="mb20"
      >
        <el-card shadow="hover" class="term-card">
          <div class="term-card-content">
            <div class="term-info">
              <p><span class="label">产品名称：</span>{{ item.productName }}</p>
              <p><span class="label">设备名称：</span>{{ item.deviceName }}</p>
              <p>
                <span class="label">属性名称：</span>{{ item.attributeName }}
              </p>
              <p>
                <span class="label">比较运算符：</span>
                <span>{{
                  getComparisonOperatorLabel(item.comparisonOperator)
                }}</span>
              </p>
              <p>
                <span class="label">属性值：</span>
                <span v-if="item.comparisonOperator === 'between'"
                  >{{ item.valueMin }} - {{ item.valueMax }}</span
                >
                <span v-else-if="item.comparisonOperator === 'in'">{{
                  item.valueList
                }}</span>
                <span v-else>{{ item.valueMax }}</span>
              </p>
            </div>
            <div class="term-actions">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="$emit('edit-term', item)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="$emit('delete-term', item)"
                >删除</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.trigger-terms-list {
  margin-top: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.term-card {
  height: 100%;
}

.term-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.term-info {
  flex: 1;
}

.term-info p {
  margin: 8px 0;
  line-height: 1.5;
}

.term-info .label {
  font-weight: bold;
  color: #606266;
}

.term-actions {
  margin-top: 15px;
  text-align: right;
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}
</style>

<script>
export default {
  dicts: ["iot_comparison_operator"],
  props: {
    termList: {
      type: Array,
      required: true,
    },
  },
  computed: {
    comparisonOperatorOptions() {
      return this.dict.type.iot_comparison_operator;
    },
  },
  methods: {
    getComparisonOperatorLabel(value) {
      const option = this.comparisonOperatorOptions.find(
        (item) => item.value === value
      );
      return option ? option.label : value;
    },
  },
};
</script>
